<template>
  <div class="detail ">
    <div class="detail-left ">
      <img v-if="showType == 'song'" :src="baseUrl + songDetail?.pic">
      <img v-if="showType == 'singer'" :src="baseUrl + singerDetail?.pic">
      <img v-if="showType == 'lyric'" :src="baseUrl + currentSongItem?.pic">
      <div v-if="showType == 'singer'" class="singer-info">
        <span>基本资料</span>
        <span>生日:{{ (singerDetail?.birth + '').split(' ')[0] }} </span>
        <span>性别:{{ singerDetail?.sex == 1 ? '男' : '女' }} </span>
        <span>故乡: {{ singerDetail?.location }}</span>
      </div>
      <div v-if="showType == 'lyric'" class="lyric-info">
        <span>歌手: {{ currentSongItem?.name.split('-')[0] }}</span>
        <span>歌曲: {{ currentSongItem?.name.split('-').at(-1) }}</span>
      </div>
      <div v-if="showType == 'song'" class="song-info">
        {{ songDetail.title }}
      </div>
    </div>
    <el-scrollbar height="100vh">
      <div class="detail-right ">
        <div class="title" v-if="showType !== 'lyric'">{{ singerDetail?.name ?? '简介' }}</div>
        <LyricList v-if="showType == 'lyric'" />
        <p class="detail-info" v-if="showType !== 'lyric'">
          {{ singerDetail?.introduction ?? songDetail?.introduction }}
        </p>
        <div class="rate-box " v-if="false">
          <div class="left ">
            <span>歌单平分</span>
            <span class="big-number">{{ value1 }}</span>
            <el-rate v-model="value1" />
          </div>
          <div class="right">
            <span>评价 {{ value1 }}</span>
            <el-rate v-model="value1" />
          </div>

        </div>
        <div class="song-list">
          <el-table ref="tableRef" v-if="showType !== 'lyric'" @row-click="chooseSong" class="el-table"
            highlight-current-row :data="[...songList]" style="width: 100%">
            <el-table-column prop="name" label="歌曲" width="180">
              <template #default="scope">
                {{ scope.row.name.split('-').at(-1) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="歌手" width="180">
              <template #default="scope">
                {{ scope.row.name.split('-')[0] }}
              </template>
            </el-table-column>
            <el-table-column prop="introduction" label="专辑" />
          </el-table>
        </div>

        <section class="comment " v-if="showType !== 'singer'">
          <div class="comment-title">
            <span>评论</span>
            <span>共 {{ currentComment?.length ?? 0 }}条评论</span>
          </div>
          <el-input v-model="comment.content" class="el-input" style="width: 30rem" type="textarea" maxlength="100"
            placeholder="期待您的精彩评论"></el-input>
          <el-button @click="toComment" type="primary">发表评论</el-button>

          <div class="comment-list">
            <div class="comment-item " v-for=" item in currentComment" :key="item.id">
              <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              <div class="user-info ">
                <span>{{ userList.find(u => u.id == item.userId)?.username }}</span>
                <span>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                <span>{{ item.content }}</span>
              </div>
              <div>
                <i @click="toUp(item)" class="iconfont icon-dianzan_kuai pointer"></i>
                <span style="font-size: 10px;">{{ item.up }}</span>
              </div>
            </div>
          </div>
        </section>

      </div>
    </el-scrollbar>

  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, toRefs, watch } from "vue"
import LyricList from "./LyricList.vue"
import { IDetailType, ISingerDetailItem, ISongItem } from "@/fetch/type";
import { ISingerItem } from "@/fetch/type";
import { useAudio } from "@/utils/useAudio";
import { ICommentItem, getSongComment, likeCommet, saveComment } from "@/fetch/song";
import { useUser } from "@/store/user";
import { getSongSheetComment } from "@/fetch/song.ts"
import { dayjs } from "element-plus";
const baseUrl = import.meta.env.VITE_URL
const props = defineProps<{
  showType: IDetailType,
  singerDetail?: ISingerItem,
  songList?: ISingerDetailItem[],
  songDetail?: ISongItem,
  comment?: ICommentItem[]
}>()
const value1 = ref(2)
const { changeSong, currentLyric, currentSongList, currentSongItem, currentIndex } = useAudio()
const currentComment = ref<ICommentItem[]>([])
// 播放 歌手名下歌曲
const chooseSong = async (item: ISingerDetailItem) => {
  currentSongList.value = props.songList
  currentLyric.value = item.lyric
  changeSong(`${baseUrl}${item.url}`)
}

// 获取评论
const getComment = async (id: number) => {
  const sheetId = props.songDetail?.id
  const { data } = sheetId ? await getSongSheetComment(sheetId) : await getSongComment(id)
  currentComment.value = data.data
}
if (currentSongItem.value) getComment(currentSongItem.value.id)
const tableRef = ref<any>()


watch(currentIndex, index => {
  tableRef.value?.setCurrentRow(currentSongList.value[index]);
  getComment(currentSongItem.value.id)
})

watch(() => props.comment, comm => {
  console.log(comm)
  currentComment.value = comm
}, {
  immediate: true
})

// 用户评论
const { currentUser, userList, token } = toRefs(useUser())
const comment = reactive({}) as ICommentItem
const toComment = async () => {
  // Reflect.ownKeys(currentUser.value).keys.length == 0
  if (!token.value) return ElMessage.warning("请先登录")
  comment.createTime = Date.now()
  comment.songListId = props.songDetail?.id
  comment.songId = comment.songListId ? '' : currentSongItem.value?.id
  comment.type = comment.songListId ? 1 : 0
  comment.up = 0
  comment.userId = currentUser.value.id
  if (!comment.content?.trim()) return ElMessage.warning("请输入内容后再评价!")
  const { code } = await saveComment(comment)
  comment.content = ''
  if (code !== 200) return
  //如果是歌单 首先获取歌单评论  其次获取歌曲评论
  getComment(comment.songId)


}

let upTimer
// 点赞评论
const toUp = (item: ICommentItem) => {
  if (!token.value) return ElMessage.warning("请先登录")
  if (currentUser.value.id == item.userId) return ElMessage.warning("不能给自己点赞")
  upTimer && clearTimeout(upTimer)
  upTimer = setTimeout(() => {
    item.up += 1
    likeCommet(item.id, item.up)
  }, 300);

}
</script>
<style lang="scss" scoped>
.detail {
  display: flex;
  width: 100%;
  justify-content: stretch;
  color: var(--font-default-color);
  height: calc(100vh - 160px);
  transition: all 0.3s;

  &-left {
    width: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6rem;
    padding: 1rem 3rem;

    img {
      width: 9rem;
      height: 9rem;
      border-radius: 0.4rem;

    }


    .song-info {
      font-size: 1rem;
      font-weight: 700;

    }

    .lyric-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      height: 3rem;
      font-weight: 700;
    }

    .singer-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-top: 1rem;



      span:nth-child(1) {
        font-size: 0.8rem;
        font-weight: 700;
      }
    }


  }

  &-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: flex-start;
    padding-right: 3rem;

    .comment {
      display: flex;
      flex-direction: column;
      width: 30rem;
      align-items: flex-start;
      justify-content: flex-start;
      color: var(--font-gray-color);
      margin-bottom: 180px;

      &-list {
        margin: 0.5rem 0;
        width: 100%;

        .comment-item {
          display: flex;
          height: 80px;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          padding-right: 2rem;
          margin: 0.2rem 0;
          border-bottom: 1px solid var(--background-gray-color);

          .user-info {
            display: flex;
            flex-direction: column;
            height: 60px;
            justify-content: space-between;
            flex: 1;
            padding-left: 0.5rem;
            font-size: 14px;


            span:nth-child(2) {
              font-size: 10px;
            }

          }

          img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
          }
        }
      }

      &-title {
        margin: 0.5rem 0;

        span {
          font-size: 14px;
        }

        span:nth-child(1) {
          font-weight: 700;
          font-size: 1rem;
          color: var(--font-default-color);
        }
      }



      .el-input {
        margin-bottom: 0.5rem;

        :deep(.el-textarea__inner) {
          background-color: var(--background-default-color);
        }
      }
    }

    .title {
      font-weight: 700;
      font-size: 1rem;
      margin: 1rem 0;
    }

    .rate-box {
      width: 20rem;
      height: 3rem;

      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 0.7rem;
      font-weight: 700;

      .left,
      .right {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        align-items: flex-start;
        justify-content: center;
        position: relative;

        .big-number {
          position: absolute;
          font-size: 2.5rem;
          top: 50%;
          right: 2rem;
          transform: translateY(-50%);
        }
      }
    }

    .detail-info {
      font-size: 14px;
      line-height: 1rem;
      color: var(--font-gray-color);
    }

    .song-list {
      width: 100%;
      margin-top: 1rem;


    }
  }
}
</style>